import React, {Component} from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Text, Button, Block} from '@tarojs/components';
import {http} from '../../utils/http';
import {GET_ROOM_INFO, GET_LIVEPOSTER_CODE, SHARE_INFO} from '../../constants/api';
import {formatTime, vcmonitor} from '../../utils/tools'
import {user} from '../../utils/user.service';
import {getLivePoster} from '../../utils/poster.service'
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './detail.scss';

interface roomInfoType {
  anchor_img: string
  anchor_name: string
  cover_img: string
  end_time: number
  goods: goodInfoType[]
  price: number
  url: string
  live_status: 101 | 102 | 103 | 104 | 105 | 106 | 107
  name: string
  roomid: number
  start_time: number

}

interface userShareItem {
  bindSellerId: number
  platformName: string
  sellerId: number
  serviceTel: string
  sid: number
  title: string
}

interface goodInfoType {
  cover_img: string
  name: string
  price: number
  url: string
}

export default class Detail extends Component {
  state: {
    userShare: userShareItem | false
    roomInfo: roomInfoType | false
    uuid: string
    share: string
    imgUrl: string
    posterDatal: {
      posterImgUrl: string
      title: string
      QRcode: string
      time: string
      name: string
    }
    url: string
  } = {
    userShare: false,
    roomInfo: false,
    uuid: '',
    share: '',
    imgUrl: '',
    posterDatal: {
      posterImgUrl: '',
      title: '',
      QRcode: '',
      time: '',
      name: ''
    },
    url: ''
  }
  // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常
  status = {
    101: '直播中',//只有开始
    102: '未开始',
    103: '已结束',//开始结束
    104: '禁播',
    105: '暂停中',//只有开始
    106: '异常',
    107: '已过期'
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
      Taro.showModal({
        title: '提示',
        content: '该功能暂未开放，请使用小程序观看',
        showCancel: false,
        confirmText: '知道了',
        success(res) {
          Taro.navigateBack({
            delta: 1
          })
        }
      })
      return
    }
    const uuid = Taro.getCurrentInstance().router.params.uuid || '';
    const itemData = await http.post(GET_ROOM_INFO + uuid, {});
    const share = await user.getSellerParams();
    const userName = await http.post(SHARE_INFO, {});
    const thisUel = 'common/live-player/detail?uuid=';
    const posterData = {
      posterImgUrl: '',
      title: itemData.name,
      QRcode: '',
      time: '开播时间:' + formatTime((itemData.start_time) * 1000),
      name: itemData.anchor_name,
      shareName: ''
    }
    this.setState({
      roomInfo: itemData,
      uuid: uuid,
      share: share,
      url: thisUel + uuid + '&' + share,
      userShare: userName
    }, async () => {
      const codeUrl = encodeURIComponent(this.state.url);
      const RES = await http.post(GET_LIVEPOSTER_CODE + codeUrl, {img: itemData.anchor_img});
      const posterDatal = {
        posterImgUrl: RES.img,
        title: itemData.name,
        QRcode: RES.miniPath,
        time: formatTime((itemData.start_time) * 1000),
        name: itemData.anchor_name,
        shareName: userName.title
      }
      this.setState({
        posterDatal: posterDatal
      })
    })
  }

  async componentDidShow() {
    vcmonitor(this)
  }

  onShareAppMessage() {
    return {
      path: '/common/live-player/detail?uuid=' + this.state.uuid + '&' + this.state.share + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
      title: (this.state.roomInfo && this.state.roomInfo.name) || '',
      imageUrl: (this.state.roomInfo && this.state.roomInfo.cover_img) || ''
    }
  }

  onShareTimeline() {
    return {
      query: 'uuid=' + this.state.uuid + '&' + this.state.share + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
      title: (this.state.roomInfo && this.state.roomInfo.name) || '',
      imageUrl: (this.state.roomInfo && this.state.roomInfo.cover_img) || ''
    }
  }


  async onGetPoster() {
    Taro.showLoading({title: '获取海报中...'});
    const poster = await getLivePoster(this.state.posterDatal)
    Taro.hideLoading();
    if (poster) {
      Taro.navigateTo({url: '/distributor/poster/poster?url=' + poster.url})
    } else {
      Taro.showToast({title: '获取海报失败！', icon: 'none'})
    }
  }

  goto(roomid = 0, liveStatus = 101) {
    const url = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + roomid;
    Taro.navigateTo({
      url
    })
  }

  gotoLive(roomid = 0, liveStatus = 101) {
    const url = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + roomid;
    Taro.navigateTo({
      url
    })
  }

  render() {
    const {roomInfo} = this.state
    return (
      <View className='Live_box'>
        <GzhAuth />
        <View className='imgBox'>
          <View className='Mask'></View>
          <Image className='Live_img' mode='aspectFill' src={(roomInfo && roomInfo.cover_img) || ''}></Image>
        </View>
        <View className='textContent'>
          <Image className='Anchor_img' mode='aspectFill' src={(roomInfo && roomInfo.anchor_img) || ''}></Image>
          <View className='Room_name'>{roomInfo && roomInfo.name || ''}</View>
          <View className='Live_name'>{roomInfo && roomInfo.anchor_name || ''}</View>
          <View className='Live_time'>
            {roomInfo && roomInfo.live_status === 101 && <View>开播{formatTime((roomInfo.end_time) * 1000)}</View>}
            {roomInfo && roomInfo.live_status === 102 &&
              <Block><Text>开播:{formatTime((roomInfo.start_time) * 1000)}</Text><Text>---</Text><Text>结束:{formatTime((roomInfo.end_time) * 1000)}</Text></Block>}
            {roomInfo && roomInfo.live_status === 103 &&
              <Block><Text>开播:{formatTime((roomInfo.start_time) * 1000)}</Text><Text>---</Text><Text>结束:{formatTime((roomInfo.end_time) * 1000)}</Text></Block>}
            {roomInfo && roomInfo.live_status === 105 && <View>开播{formatTime((roomInfo.end_time) * 1000)}</View>}
          </View>
          <View className='btnBox'>
            {roomInfo && roomInfo.live_status !== 107 ? <Button className='GoTo'
              onClick={this.goto.bind(this, roomInfo && roomInfo.roomid, roomInfo && roomInfo.live_status)}
            >
              {roomInfo && roomInfo.live_status === 101 && '进入直播' || ''}
              {roomInfo && roomInfo.live_status === 102 && '查看预告' || ''}
              {/*{roomInfo && roomInfo.live_status === 103 && '观看回放'||''}    */}
              {roomInfo && roomInfo.live_status === 105 && '进入直播' || ''}
            </Button> : <Button className='GoToGq' disabled>已过期</Button>}
            {roomInfo && roomInfo.live_status === 103 && <Button className='GoToLiveRoom'
              onClick={this.gotoLive.bind(this, roomInfo && roomInfo.roomid, roomInfo && roomInfo.live_status)}
            >
              {roomInfo && roomInfo.live_status === 103 && '查看详情' || ''}
            </Button>}

          </View>
          {roomInfo && roomInfo.live_status !== 107 && <View className='bottomBtn'>
            <Button className='shareBtn underBtn' plain='true' open-type='share'>分享链接</Button>
            <Button className='getPoster underBtn' plain='true' onClick={() => {
              this.onGetPoster()
            }}
            >分享海报</Button>
          </View>}
        </View>
      </View>
    )
  }
}
